<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑部门' : '添加部门'"
    width="30%"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      label-width="120px"
      style="width: 85%"
      :model="dialogFormData"
      ref="FormRef"
      :rules="rules"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input placeholde="请输入部门名称" v-model="dialogFormData.name" />
      </el-form-item>
      <el-form-item label="部门编号" prop="depNo">
        <el-input placeholde="请输入部门编号" v-model="dialogFormData.depNo" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click="changeDialogVisible(false)">取消</el-button>
        <el-button type="primary" @click="handleConfirm">{{ isEdit ? '编辑' : '确定' }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useMultiplexStore } from '@/store/multiplex'
import type { FormInstance, FormRules } from 'element-plus'

const multiplexStore = useMultiplexStore()

const dialogVisible = ref(false)
// 是否编辑标志
const isEdit = ref(false)

// 添加用户密码默认123456，后期用户通过修改密码进行修改
const FormRef = ref<FormInstance>()

const dialogFormData = reactive<any>({
  name: '',
  depNo: ''
})

let id: any = null

const rules = reactive<FormRules<typeof dialogFormData>>({
  name: [{ trigger: 'blur', required: true, message: '请输入部门名称' }],
  depNo: [{ trigger: 'blur', required: true, message: '请输入部门编号' }]
})

/**
 *
 * @param bol 必传，控制弹窗显示或隐藏
 * @param edit 选传，判断是否是编辑
 * @param data 选传，编辑时候预览的数据
 */
const changeDialogVisible = (bol: boolean, edit?: boolean, data?: any) => {
  dialogVisible.value = bol

  if (edit && data) {
    // 正在编辑，且需要预览数据

    // 标志在发送请求的时候也需要使用到,用于不同请求之间判断，因此需要全局保存
    isEdit.value = edit
    // 当前弹窗组件预览数据，需要将接受的数据填充到表单数据源中
    let keys = Reflect.ownKeys(dialogFormData) //如果需要处理兼容，需要使用如下,同时将私有属性中非Symbol和Symbol一起获取
    // Object.getOwnPropertyNames(dialogFormData).concat(Object.getOwnPropertySymbols(dialogFormData))
    // 不适用for in 循环消耗性能
    for (let i = 0; i < keys.length; i++) {
      // 当前表单拥有的数据，去传入的数据中进行匹配
      dialogFormData[keys[i]] = data[keys[i]]
    }
    id = data._id
  }

  // 如果为关闭，还需要将表单数据清空
  if (!bol) {
    // 防止从编辑进入后，将状态修改了但是不进行操作，然后再重新进入新增数据没有恢复
    isEdit.value = false
    FormRef.value?.resetFields()
    // 下面这一步骤是编辑按钮取消时候再次清空数据，出现了bug，发现得再次手动清空数据
    Object.assign(dialogFormData, {
      name: '',
      depNo: ''
    })
    id = null
  }
}

const handleConfirm = () => {
  FormRef.value?.validate(async (val: boolean) => {
    if (val) {
      // 无论编辑还是新增都是该按钮且需要进行数据校验
      if (isEdit.value) {
        if (id) {
          await multiplexStore.updateInfo('/depart/departlist', id, dialogFormData)
        } else {
          console.log('id不存在')
        }
      } else {
        let config = { ...dialogFormData }
        await multiplexStore.addItem('/depart/departlist', config)
      }
      // 添加成功，关闭对话框并清除数据
      changeDialogVisible(false)
    } else {
      ElMessage({
        type: 'error',
        message: '请重新输入表单数据'
      })
    }
  })
}

// 暴露方法弹出对话框
defineExpose({
  changeDialogVisible
})
</script>

<style lang="" scoped></style>
